<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #flex, #flex2, #flex3, #flex4, #flex5, #flex6 {
            display: flex;
            background-color: DodgerBlue;
        }

        #flex2 {
            flex-direction: column;
        }

        #flex3 {
            flex-wrap: nowrap;
        }

        #flex4 {
            flex-wrap: wrap;
        }

        #flex5 > .grow-1 {
            flex-grow: 1;
        }

        #flex5 > .grow-2 {
            flex-grow: 2;
        }


        #flex > div, #flex2 > div, #flex3 > div, #flex4 > div, #flex5 > div, #flex5 > .grow-1,
        #flex5 > .grow-2, #flex6 > div, #flex6 > .align-center {
            background-color: #f1f1f1;
            width: 100px;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }

        #flex5 > .percent-30 {
            flex-basis: 30%;
        }

        #flex5 > .percent-70 {
            flex-basis: 70%;
        }

        .a {
            font-size: 16px;
        }

        #flex6 > .align-center {
            align-self: center;
            line-height: 25px;
        }
        /* -------------------------------------- */
        .nav ul {
            display: flex;
            padding: 0;
            list-style-type: none;
            background-color: #333;
        }
        .nav li a {
            display: block;
            color: white;
            padding: 14px 16px;
            text-decoration: none;
        }
        .nav li a:hover {
            background-color: #111;
        }
        .nav .right {
            margin-left: auto;
        }
    </style>
</head>
<body>
<p>
    A Flexible Layout must have a parent element with the <em>display</em>
    property set to <em>flex</em>.
</p>
<p>Direct child elements(s) of the flexible container automatically
    becomes flexible items.</p>
<div id="flex">
    <div>1
        <div>1.1</div>
        <div>1.2</div>
    </div>
    <div>2</div>
    <div>3</div>
</div>
<hr>
<div id="flex2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
<hr>
<p>The "flex-wrap: nowrap;" specifies that the flex items will not
    wrap (this is default):</p>
<div id="flex3">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
</div>
<hr>
<p>The "flex-wrap: wrap;" specifies that the flex items will wrap
    if necessary:</p>
<div id="flex4">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
</div>
<hr>
<p>The flex-grow property specifies how much a flex item will grow
    relative to the rest of the flex items.</p>
<div id="flex5">
    <div class="grow-1">1</div>
    <div class="grow-1">2</div>
    <div class="grow-2">3</div>
</div>
<hr>
<div id="flex5">
    <div class="percent-30">30%</div>
    <div class="percent-70">70%</div>
</div>
<hr>
<div id="flex5">
    <div class="grow-1">1</div>
    <div class="grow-1">2</div>
    <div class="grow-2">3</div>
    <div class="grow-1">4</div>
    <div class="grow-1">5</div>
    <div class="grow-2" style="flex-shrink: 0">6</div>
</div>
<hr>
<p>The "align-self: center;" aligns the selected flex item in the
    middle of the container:</p>
<div id="flex6">
    <div>1</div>
    <div class="align-center">2</div>
    <div>3</div>
</div>
<hr>

<h2>Horizontal Navigation Bar</h2>
<div class="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li class="right"><a href="#">About</a></li>
        <li><a href="#">Logout</a></li>
    </ul>
</div>
<br>
<br>
</body>
</html>